<template>
  <div v-show="showmodule" id="riversurvey-overlay-container" class="riversurvey-overlay-container">
    <div class="riversurvey-overlay">
      <h2 id="location-title">{{ title }}</h2>
      <p id="location-description" style="font-size: 16px">{{ description }}</p>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapState } from 'vuex'
  import { AnimateMarkerLayer, AnimateMarkerType } from '../../../../assets/js/mapboxgl/animate-marker/AnimateMarkerLayer'
  export default {
    name: 'RiverSurvey',
    data() {
      return {
        title: '',
        description: '',
        locations: [
          {
            'id': '1',
            'title': '松花江佳木斯段',
            'description':
              '中国七大河之一，黑龙江在中国境内的最大支流。松花江在隋代称难河，唐代称那水，辽金两代称鸭子河、混同江，清代称混同江、松花江。松花江流经吉林、黑龙江两省；流域面积55.72万平方公里，涵盖东北四省区黑龙江、吉林、辽宁、内蒙古；年径流量762亿立方米。',
            'camera': {
              center: [129.7629383530098, 46.53490335056042],
              zoom: 7.21,
              pitch: 0
            }
          },
          {
            'id': '2',
            'title': 'Brooklyn',
            'description':
              "No matter how hip it looks on TV, NYC's most populous borough is best experienced in person. Read on to find out about live music, Prospect Park, Nets basketball and more.",
            'camera': {
              center: [-73.9499, 40.626],
              bearing: -8.9,
              zoom: 11.68
            }
          },
          {
            'id': '3',
            'title': 'Manhattan',
            'description':
              'Even if you think you know Manhattan—its world-class museums, fine dining and unforgettable views—the borough always has something new and exciting in store.',
            'camera': {
              center: [-74.007, 40.7437],
              bearing: 25.3,
              zoom: 11.5
            }
          },
          {
            'id': '4',
            'title': 'Queens',
            'description':
              "Taste food from around the globe, watch Mets baseball and US Open tennis, see cutting-edge art and more in one of the world's most diverse places.",
            'camera': {
              center: [-73.8432, 40.6923],
              bearing: 36,
              zoom: 11.37
            }
          },
          {
            'id': '5',
            'title': 'Staten Island',
            'description':
              'Take a free ferry ride to an island getaway filled with historic architecture, stunning views, gardens and many family-friendly attractions.',
            'camera': {
              center: [-74.1991, 40.5441],
              bearing: 28.4,
              zoom: 11.64
            }
          },
          {
            'id': '6',
            'title': 'Boroughs of new york',
            'description':
              'New York City is made up of five boroughs: the Bronx, Brooklyn, Manhattan, Queens and Staten Island. Each one has enough attractions—and enough personality—to be a city all its own.',
            'camera': {
              center: [-74.0315, 40.6989],
              zoom: 9.68,
              bearing: 0,
              pitch: 0
            }
          }
        ],
        playstate: false,
        timeout: undefined,
        showmodule: false,
        // 183
        rivershjjms: {
          'type': 'FeatureCollection',
          'features': [
          {
            'geometry': {
              'coordinates': [
                  [
                    129.7629383530098,
                    46.53490335056042
                  ],
                  [
                    129.7638212432063,
                    46.53529996275649
                  ],
                  [
                    129.7700014745819,
                    46.53807624812905
                  ],
                  [
                    129.7849107942021,
                    46.54504115446483
                  ],
                  [
                    129.8045185726794,
                    46.55572072799174
                  ],
                  [
                    129.8232970548040,
                    46.56846488300509
                  ],
                  [
                    129.8371923585312,
                    46.57920190762884
                  ],
                  [
                    129.8439452896508,
                    46.58464385507420
                  ],
                  [
                    129.8470015321248,
                    46.58705946507285
                  ],
                  [
                    129.8508941856535,
                    46.58955404481720
                  ],
                  [
                    129.8588011347189,
                    46.59302248482234
                  ],
                  [
                    129.8722758697579,
                    46.59791865039807
                  ],
                  [
                    129.8877295202470,
                    46.60514272271039
                  ],
                  [
                    129.9008445500490,
                    46.61475682354865
                  ],
                  [
                    129.9095311215326,
                    46.62302452133923
                  ],
                  [
                    129.9130085881377,
                    46.62654346390040
                  ],
                  [
                    129.9135053690813,
                    46.62704616998056
                  ],
                  [
                    129.9135151020103,
                    46.62707743346511
                  ],
                  [
                    129.9136657594268,
                    46.62805429833040
                  ],
                  [
                    129.9147203613419,
                    46.63489235238760
                  ],
                  [
                    129.9179846264844,
                    46.65133041929507
                  ],
                  [
                    129.9263713705018,
                    46.67261786057756
                  ],
                  [
                    129.9411930765420,
                    46.69353975969724
                  ],
                  [
                    129.9557538008334,
                    46.71551355000005
                  ],
                  [
                    129.9645867699585,
                    46.73967639641671
                  ],
                  [
                    129.9751503188334,
                    46.75941204033338
                  ],
                  [
                    129.9950377864585,
                    46.76841061216672
                  ],
                  [
                    130.0194574198334,
                    46.76934122200006
                  ],
                  [
                    130.0420059326667,
                    46.76647592879173
                  ],
                  [
                    130.0622189975001,
                    46.76151960733339
                  ],
                  [
                    130.0806658242501,
                    46.75601632810422
                  ],
                  [
                    130.0961108135001,
                    46.75343412850004
                  ],
                  [
                    130.1067028938334,
                    46.75683986747922
                  ],
                  [
                    130.1099339151667,
                    46.76577172333339
                  ],
                  [
                    130.1052786660209,
                    46.77874605181256
                  ],
                  [
                    130.1008007680001,
                    46.79372059916673
                  ],
                  [
                    130.1057380993126,
                    46.80811679558340
                  ],
                  [
                    130.1254367315001,
                    46.81776941650005
                  ],
                  [
                    130.1602839217918,
                    46.81975217943755
                  ],
                  [
                    130.1947234768334,
                    46.81768122500006
                  ],
                  [
                    130.2138089897501,
                    46.81588105616674
                  ],
                  [
                    130.2209766501668,
                    46.81496720233341
                  ],
                  [
                    130.2232434915210,
                    46.81463201841675
                  ],
                  [
                    130.2235673260001,
                    46.81458413500008
                  ],
                  [
                    130.2235673260001,
                    46.81458413400003
                  ],
                  [
                    130.2244817252501,
                    46.81485684016670
                  ],
                  [
                    130.2308825200001,
                    46.81676578333336
                  ],
                  [
                    130.2461339061460,
                    46.82149650456253
                  ],
                  [
                    130.2651112811668,
                    46.82843176116669
                  ],
                  [
                    130.2819842277918,
                    46.83609092372920
                  ],
                  [
                    130.2965878681668,
                    46.84134259966670
                  ],
                  [
                    130.3095137598542,
                    46.84185789193754
                  ],
                  [
                    130.3187136626668,
                    46.84016864883339
                  ],
                  [
                    130.3224669334584,
                    46.83926885760423
                  ],
                  [
                    130.3230031150001,
                    46.83914031600006
                  ],
                  [
                    130.3230031152017,
                    46.83914031577302
                  ],
                  [
                    130.324048135010,
                    46.83875318675692
                  ],
                  [
                    130.3313632736681,
                    46.83604328364419
                  ],
                  [
                    130.3495260549759,
                    46.83060022363654
                  ],
                  [
                    130.3763436225337,
                    46.82966318912889
                  ],
                  [
                    130.4077039309032,
                    46.83924206767279
                  ],
                  [
                    130.4385885586912,
                    46.85278000225304
                  ],
                  [
                    130.4651684190917,
                    46.86305534402195
                  ],
                  [
                    130.4892781396013,
                    46.87275402136871
                  ],
                  [
                    130.5127708188956,
                    46.88586989799146
                  ],
                  [
                    130.5319097260630,
                    46.90172100158748
                  ],
                  [
                    130.5427453190361,
                    46.91818045868187
                  ],
                  [
                    130.5460666407128,
                    46.93201762711188
                  ],
                  [
                    130.5443237318235,
                    46.94125087548385
                  ],
                  [
                    130.5418720394630,
                    46.94999838416817
                  ],
                  [
                    130.5422724974902,
                    46.96188535325151
                  ],
                  [
                    130.5440025804547,
                    46.97246524992139
                  ],
                  [
                    130.544856443570,
                    46.97699864735099
                  ],
                  [
                    130.5449784240150,
                    46.97764627555520
                  ],
                  [
                    130.5449784240001,
                    46.97764627600003
                  ],
                  [
                    130.5455923905626,
                    46.97821470608337
                  ],
                  [
                    130.5498901565001,
                    46.98219371666670
                  ],
                  [
                    130.5600910231251,
                    46.99151777525003
                  ],
                  [
                    130.5725562995001,
                    47.00221689733338
                  ],
                  [
                    130.5829482404584,
                    47.01016257806254
                  ],
                  [
                    130.5899908761667,
                    47.01649668316671
                  ],
                  [
                    130.5949754768334,
                    47.02318939318755
                  ],
                  [
                    130.60640049750,
                    47.03025377733340
                  ],
                  [
                    130.6301926248958,
                    47.03667610770840
                  ],
                  [
                    130.6547842876667,
                    47.03929257933339
                  ],
                  [
                    130.668156709250,
                    47.03596308608338
                  ],
                  [
                    130.6739805503334,
                    47.03079239433338
                  ],
                  [
                    130.6789459718750,
                    47.02873720016672
                  ],
                  [
                    130.6861316986667,
                    47.03191704600005
                  ],
                  [
                    130.6966872048125,
                    47.04099523833339
                  ],
                  [
                    130.7076563978334,
                    47.05364729366673
                  ],
                  [
                    130.7164845809167,
                    47.06713132704173
                  ],
                  [
                    130.7263282065001,
                    47.08002363766675
                  ],
                  [
                    130.7398721780834,
                    47.09163290247923
                  ],
                  [
                    130.7522040541667,
                    47.10287912516673
                  ],
                  [
                    130.7585287949583,
                    47.11459634377089
                  ],
                  [
                    130.76211831250,
                    47.12566340700005
                  ],
                  [
                    130.7675106268543,
                    47.13530962612506
                  ],
                  [
                    130.7762412383334,
                    47.14612135200005
                  ],
                  [
                    130.7889760848959,
                    47.16002249541671
                  ],
                  [
                    130.8059053748334,
                    47.17293016733338
                  ],
                  [
                    130.8265024048542,
                    47.18069565170839
                  ],
                  [
                    130.8478485550001,
                    47.18491372433340
                  ],
                  [
                    130.8668263261042,
                    47.18829041983340
                  ],
                  [
                    130.8819146188334,
                    47.19223331633339
                  ],
                  [
                    130.8932016087084,
                    47.19739685295838
                  ],
                  [
                    130.9056161708334,
                    47.20272136933338
                  ],
                  [
                    130.9235060372094,
                    47.20712419612542
                  ],
                  [
                    130.9440536678418,
                    47.21114472766970
                  ],
                  [
                    130.9641926934097,
                    47.21513881678634
                  ],
                  [
                    130.9440536678418,
                    47.21114472766970
                  ],
                  [
                    130.9641926934097,
                    47.21513881678634
                  ],
                  [
                    130.9870266992855,
                    47.21710608656745
                  ],
                  [
                    131.0152516795336,
                    47.21499416419033
                  ],
                  [
                    131.0437633082945,
                    47.20889892290160
                  ],
                  [
                    131.0670188164158,
                    47.20025903140242
                  ],
                  [
                    131.0855219814983,
                    47.19373609414296
                  ],
                  [
                    131.1016119154637,
                    47.19362465021251
                  ],
                  [
                    131.1189225207655,
                    47.19952804150773
                  ],
                  [
                    131.1416604869282,
                    47.20849175140114
                  ],
                  [
                    131.1750288612292,
                    47.21202102636127
                  ],
                  [
                    131.2205739534329,
                    47.20390287834221
                  ],
                  [
                    131.2642187654998,
                    47.19259161814463
                  ],
                  [
                    131.2925550157294,
                    47.18725719143912
                  ],
                  [
                    131.3104725955801,
                    47.18526478452952
                  ],
                  [
                    131.3262596122546,
                    47.18318342232455
                  ],
                  [
                    131.3434988627703,
                    47.18620224351915
                  ],
                  [
                    131.3644179538344,
                    47.19895017913754
                  ],
                  [
                    131.3905290410950,
                    47.21519521573472
                  ],
                  [
                    131.4216744031623,
                    47.22799039422225
                  ],
                  [
                    131.4517322615535,
                    47.23838991740693
                  ],
                  [
                    131.4763165661074,
                    47.24790521037675
                  ],
                  [
                    131.5039482370432,
                    47.25187542544897
                  ],
                  [
                    131.5433381891601,
                    47.24684402765264
                  ],
                  [
                    131.5910503451997,
                    47.24034400563471
                  ],
                  [
                    131.6400860761551,
                    47.23991792329883
                  ],
                  [
                    131.6813435380848,
                    47.24215712195775
                  ],
                  [
                    131.7087203229397,
                    47.24292059008343
                  ],
                  [
                    131.7302149811735,
                    47.24608912737557
                  ],
                  [
                    131.7558545341115,
                    47.25539358232783
                  ],
                  [
                    131.7896789280605,
                    47.26594318738201
                  ],
                  [
                    131.8315456661845,
                    47.27155522936746
                  ],
                  [
                    131.8705695540945,
                    47.26950082871573
                  ],
                  [
                    131.8982122902880,
                    47.25998390349670
                  ],
                  [
                    131.9260658423615,
                    47.25148572873144
                  ],
                  [
                    131.9649841376507,
                    47.25246695827558
                  ],
                  [
                    132.0027386733493,
                    47.26302840437180
                  ],
                  [
                    132.0255064536799,
                    47.28124973025022
                  ],
                  [
                    132.0361689411225,
                    47.30548584470373
                  ],
                  [
                    132.0432618521780,
                    47.33359640017540
                  ],
                  [
                    132.0612334611715,
                    47.36118477814605
                  ],
                  [
                    132.0999688782960,
                    47.38379796492641
                  ],
                  [
                    132.1451879993915,
                    47.39901363710897
                  ],
                  [
                    132.1812810756921,
                    47.40679956938405
                  ],
                  [
                    132.2114849943608,
                    47.41465323855177
                  ],
                  [
                    132.2411665018067,
                    47.42880211841776
                  ],
                  [
                    132.2653651454918,
                    47.44286396870027
                  ],
                  [
                    132.2786998298914,
                    47.44999239133878
                  ],
                  [
                    132.2844340864797,
                    47.45409407124557
                  ],
                  [
                    132.2884011849943,
                    47.46071557205713
                  ],
                  [
                    132.2980687212285,
                    47.47120988933462
                  ],
                  [
                    132.3181072828304,
                    47.48530142939692
                  ],
                  [
                    132.3403650988117,
                    47.50039380966950
                  ],
                  [
                    132.3565743587394,
                    47.51388339511255
                  ],
                  [
                    132.3708254530380,
                    47.52545832971853
                  ],
                  [
                    132.3883183993220,
                    47.53644581463583
                  ],
                  [
                    132.4063335231070,
                    47.55243750060460
                  ],
                  [
                    132.4213026114695,
                    47.57686380370794
                  ],
                  [
                    132.4341829898280,
                    47.60024575180925
                  ],
                  [
                    132.4463018593309,
                    47.61343798617534
                  ],
                  [
                    132.4559403857040,
                    47.62153898990647
                  ],
                  [
                    132.4609881015474,
                    47.63146036242588
                  ],
                  [
                    132.4608140423807,
                    47.64312232661536
                  ],
                  [
                    132.4564553107402,
                    47.65489307778424
                  ],
                  [
                    132.4541417743120,
                    47.66592407749332
                  ],
                  [
                    132.4597044151909,
                    47.67556260386633
                  ],
                  [
                    132.4721859079583,
                    47.6831559350270
                  ],
                  [
                    132.4886562566362,
                    47.68874033330181
                  ],
                  [
                    132.5050830905223,
                    47.69510799782815
                  ],
                  [
                    132.5177966621791,
                    47.70429687135307
                  ],
                  [
                    132.5256800919515,
                    47.71257193425120
                  ],
                  [
                    132.5287768946312,
                    47.71612564224427
                  ],
                  [
                    132.5292192950140,
                    47.71663331481471
                  ]
              ],
              'type': 'LineString'
            },
            'properties': {
            },
            'type': 'Feature'
          }
        ]
        },
        rivershjjmspath: {
          'type': 'FeatureCollection',
          'features': [
            {
              'geometry': {
                'coordinates': [],
                'type': 'LineString'
              },
              'properties': {
              },
              'type': 'Feature'
            }
          ]
        },
        firstTimer: null,
        timeoutLength: 20000,
        animateMarkerLayer: null,
        tempfeatures: {
          'type': 'FeatureCollection',
          'features': {
            'features': [
              {
                'geometry': {
                  'coordinates': [
                    126.24160,
                    45.62530
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.24160,
                    45.62530
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.24160,
                    45.62530
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    130.28560,
                    47.0450
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    128.91290,
                    47.72790
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.98180,
                    46.5650
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    127.01480,
                    46.64130
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.13070,
                    45.14640
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.68220,
                    45.63910
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    125.09720,
                    46.58530
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    127.19360,
                    44.64530
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    130.24980,
                    46.97840
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    125.07960,
                    45.51930
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    134.72440,
                    48.32830
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    132.53840,
                    47.69230
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    131.07910,
                    45.81460
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    132.54340,
                    47.68650
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.62810,
                    45.74540
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    130.29070,
                    46.7560
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    127.47820,
                    47.34860
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.6050,
                    45.71770
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.59410,
                    45.69310
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.57090,
                    43.93520
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    123.87060,
                    47.19450
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    124.58970,
                    46.7910
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.22750,
                    48.03430
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    129.64630,
                    44.59780
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.54190,
                    45.81180
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.50450,
                    48.23020
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.93840,
                    47.45010
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    125.11280,
                    46.59540
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    132.0290,
                    47.24690
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    127.40490,
                    46.08130
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.472190,
                    45.839610
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    130.57790,
                    46.24210
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    131.14980,
                    46.64530
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    125.15640,
                    46.55230
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    130.95760,
                    45.2950
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    125.2190,
                    46.44640
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    130.99710,
                    45.76540
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    124.45590,
                    47.7920
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    127.00850,
                    46.58430
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              },
              {
                'geometry': {
                  'coordinates': [
                    126.67820,
                    45.77830
                  ],
                  'type': 'Point'
                },
                'properties': {
                  'UserID': 0
                },
                'type': 'Feature'
              }
            ]
          }
        }
      }
    },
    methods: {
      playback(index) {
        if (!this.playstate) {
          // 清理工作
          if (typeof (this.timeout) !== 'undefined') {
            clearTimeout(this.timeout)
            this.timeout = undefined
          }
          return
        }
        this.title = this.locations[index].title
        this.description = this.locations[index].description
        const map = this.comparable.getMap()
        if (index === 0) {
          this.timeoutLength = 20000
          map.flyTo(this.locations[index].camera)
          this.firstscene()
        }
        if (index === 1) {
          this.timeoutLength = 10000
          map.flyTo(this.locations[0].camera)
          this.secondscene()
        }
        map.once('moveend', () => {
          this.timeout = setTimeout(() => {
            index = index + 1 === this.locations.length ? 0 : index + 1
            this.playback(index)
          }, this.timeoutLength)
        })
      },
      /** *
       * 第一场景，显示松花江佳木斯段主要河流概况
       */
      firstscene() {
        const map = this.comparable.getMap()
        this.rivershjjmspath.features[0].geometry.coordinates = []
        if (typeof map.getSource('rivertrace') === 'undefined') {
          map.addSource('rivertrace', { type: 'geojson', data: this.rivershjjmspath })
        }
        if (typeof map.getLayer('rivertrace') === 'undefined') {
          map.addLayer({
            'id': 'rivertrace',
            'type': 'line',
            'source': 'rivertrace',
            'paint': {
              'line-color': 'yellow',
              'line-opacity': 0.75,
              'line-width': 8
            }
          })
        }
        map.getSource('rivertrace').setData(this.rivershjjmspath)
        var coordinates = this.rivershjjms.features[0].geometry.coordinates
        this.rivershjjmspath.features[0].geometry.coordinates = [coordinates[0]]
        map.flyTo({ center: coordinates[0], zoom: 13 })
        map.setPitch(30)
        var i = 0
        this.firstTimer = window.setInterval(() => {
          if (i < coordinates.length) {
            this.rivershjjmspath.features[0].geometry.coordinates.push(
              coordinates[i]
            )
            map.getSource('rivertrace').setData(this.rivershjjmspath)
            map.panTo(coordinates[i])
            i++
          } else {
            window.clearInterval(this.firstTimer)
          }
        }, 100)
      },

      /** *
       * 第二场景，闪烁重点设施
       */
      secondscene() {
        const map = this.comparable.getMap()
        this.animateMarkerLayer = new AnimateMarkerLayer(map, AnimateMarkerType.BreathingApertureMarker)
        this.animateMarkerLayer.bindFeatures(this.tempfeatures.features)
      }
    },
    computed: {
      ...mapState({
        comparable: function(state) {
          return state.eswyzt.comparable
        }
      })
    },
    mounted() {
      this.bus.$on('playRiverSurvey', (env) => {
        this.playstate = env
        if (env) {
          this.showmodule = true
          this.playback(0)
        } else {
          // 清理工作
          const map = this.comparable.getMap()
          this.showmodule = false
          window.clearInterval(this.firstTimer)
          this.rivershjjmspath.features[0].geometry.coordinates = []
          if (typeof map.getSource('rivertrace') !== 'undefined') {
            map.getSource('rivertrace').setData(this.rivershjjmspath)
          }
        }
      })
    }
  }
</script>

<style scoped>
  .riversurvey-overlay-container {
    position: absolute;
    width: 300px;
    top: 20px;
    left: 30px;
    padding: 10px;
    z-index: 999;
  }

  .riversurvey-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background-color: #fff;
    border-radius: 3px;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .map-overlay h2,
  .map-overlay p {
    margin: 0 0 10px;
  }
</style>
